<template>
  <div class="conversationList">

    <el-scrollbar ref="conScrollBarRef" height="100%" v-loading="loadingFlag" @scroll="scrollHandle" >
      <div class="header">
        聊天列表(<span style="color: red">{{countAll}}</span>)
      </div>
      <div class="ListBox">
        <Conversation
          v-for="(item,index) in data"
          :data="item"
          :key="index"
          @click="clickHandle(item)"
        />
      </div>
      <div class="moreDataClass" @click="clickMoreData">查看更多</div>
    </el-scrollbar>
  </div>
</template>

<script setup>
import {reactive, onMounted, ref, computed, nextTick} from 'vue'
import {debounce} from "@/utils/d_fun"
import Conversation from "./conversation.vue"
import {useStore} from "vuex"
const store = useStore()
const data = computed(() => {
  return store.getters["conversation/conversations"]
})
const countAll = computed(() => store.state.conversation.countAllRead)

const conScrollBarRef = ref()
onMounted(() => {
  nextTick(() => {
    let top = store.state.conversation.scrollbarTop || 0
    conScrollBarRef.value.setScrollTop(top)
  })
})

const loadingFlag = ref(false)
const clickHandle = (item) => {
  store.dispatch('conversation/setActive', item)
}
const clickMoreData = async () => {
  loadingFlag.value = true
  await store.dispatch("conversation/getConversations")
  loadingFlag.value = false
}

const scrollHandle = debounce(
  ({ scrollTop }) => {
    store.dispatch("conversation/setScrollbarTop", scrollTop)
  }, 100
)
</script>

<style scoped lang="scss">
.moreDataClass {
  cursor: pointer;
  color: $fontSizeColor;
  margin-top: 10px;
  padding: 10px;
  text-align: center;
}
.conversationList {
  width: 300px;
  height: 100%;
  //overflow: auto;
  border: 1px solid $borderColor;
  .header {
    box-sizing: border-box;
    padding: 20px;
    height: 50px;
    font-size: 13px;
    display: flex;
    //justify-content: flex-end;
    align-items: center;
    border-bottom: 1px solid $borderColor;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 10;
  }
  .ListBox {
    margin-top: -1px;
  }

}
</style>